<template>
	<view class="wishList">
		  <view class="wishList_top">
			  <view>
				  <image  class="icon1"  src="../../static/image/icon_cha.png"></image>
				  <text class="txt">已收藏{{list.length}}个餐宴</text>
			  </view>
			  <view>
			  <image    class="icon1" src="../../static/image/icon_clear.png"></image>
			  <text  class="txt" @click="handlerClear">清空</text>
			  </view>
		  </view>
		 <!-- 这是中间的内容区域 -->
		  <template v-if="list.length">
			   <Xinyuan v-for=" (item,i) in  list" :key="i" :obj="item" @parentcancel="parent1"></Xinyuan>
			  
		  </template>
		  <view v-else>你还没有任何的收藏</view>
	</view>
</template>
<script>
	import {goodslist} from './goods.json'
	import   Xinyuan from  '../../components/xinyuan.vue'
	export  default{
		components:{
			Xinyuan
		},
		data(){
			return{
				list:[],
			}
		},
		created(){
			  this.list=goodslist
		},
		// 这是页面刷新的开始
		onPullDownRefresh(){
			  this.list=goodslist
			  setTimeout(()=>{
				  uni.stopPullDownRefresh()
			  },500)
		},
		onReachBottom(){
	// 		const self2=this
			let  len1=this.list.length
			uni.showLoading({
			    title: '加载中'
			});
		  setTimeout(()=>{
			  const arr11=[
			  	{ "id": len1 + 1, "img": "../static/image/goods4.png", "goodsname": "麻辣小龙虾", "price": 188 },
			  	{ "id": len1 + 2, "img": "../static/image/goods1.jpg", "goodsname": "和牛拉面", "price": 128 },
			  	{ "id": len1 + 3, "img": "../static/image/goods3.jpg", "goodsname": "避风塘炒蟹", "price": 188 },
			  	{ "id": len1 + 4, "img": "../static/image/goods3.jpg", "goodsname": "避风塘炒蟹", "price": 188 },
			  ]
			  this.list=[...this.list,...arr11]
			 uni.hideLoading()
		  },2000)
		},
		
		methods:{
		
			parent1(id){
				this.list=this.list.filter(item=> item.id!==id)
			},
			//  这是清空的开始
			handlerClear(){
				const  self=this
				uni.showModal({
				    title: '提示',
				    content: '确定要清空吗?',
				    success: function (res) {
				        if (res.confirm) {
							self.list=[]
				            console.log('用户点击确定');
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}
			
		}
	}
</script>

<style lang="less" scoped>
	
.wishList_top{
	display: flex;
	box-sizing: border-box;
	padding:0px 11px;
	justify-content: space-between;
.txt{
	color: #666;
}
	.icon1{
		width: 15px;
		height: 15px;
	}
}


</style>
